<template>
  <div class="item">
    <div>
      <div class="item-img">
        <img
          alt="Smartisan 快充移动电源 10000mAh"
          :src="gitem.stock_info[num].image"
          style="opacity: 1;"
        />
      </div>
      <h6>{{gitem.stock_info[num].title}}</h6>
      <h3>{{gitem.stock_info[num].sub_title}}</h3>
      <div class="params-colors">
        <ul class="colors-list">
          <li 
          v-for="(item,index) in gitem.stock_info" :key="index" @click="num=index">
            <a href="javascript:;" :style="'background:'+item.detail.color+';'"
            :class="index==num?'active':''"
            >
            </a>
          </li>
        </ul>
      </div>
      <div class="item-btns clearfix">
        <span class="item-gray-btn">
          <a href="javascript:;" target="_blank" @click="detail(gindex)">查看详情</a>
        </span>
        <span class="item-blue-btn" @click="submitdata">加入购物车</span>
      </div>
      <div class="item-price clearfix">
        <i>¥</i>
        <span>199.00</span>
      </div>
      <div class="discount-icon">false</div>
      <div class="item-cover">
        <a href="javascript:;" target="_blank"></a>
      </div>
    </div>
  </div>
</template>

<script>
export default {
    props:['gitem','gindex'],
    data() {
        return {
            num:0
        }
    },
    methods: {
      detail(id){
          this.$router.push({
              path:'/detail/'+id
          })
      },
      submitdata(){
          this.$store.commit('datamut',this.gitem.stock_info[this.num])
      }
    },
};
</script>

<style>
</style>